<div class="tab-pane" id="tab-images" role="tabpanel" aria-labelledby="nav-images">
	<div class="card mb-4">
		<div class="card-header p-3">
			<div class="row align-items-center">
				<div class="col">
					<div class="h4 mb-0"><i class="bi bi-box-seam me-2"></i>Images</div>
				</div>
				<div class="col-auto">
					<a href="https://gitbrent.github.io/PptxGenJS/docs/api-images/" title="Documentation" target="_blank">
						Docs<i class="bi bi-box-arrow-up-right ms-2"></i>
					</a>
				</div>
			</div>
		</div>
		<div class="card-body">
			<div class="row row-cols g-4">
				<div class="col">
					<h5>Slide 1</h5>
					<h6>Image Types</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Type: Animated GIF</li>
						<li class="list-group-item">Type: GIF</li>
						<li class="list-group-item">Type: JPG</li>
						<li class="list-group-item">Type: PNG</li>
						<li class="list-group-item">Type: SVG</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 2</h5>
					<h6>Image URLs</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Source: GitHub CDN</li>
						<li class="list-group-item">Source: Wikimedia URL</li>
						<li class="list-group-item">Source: URL variables</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 3</h5>
					<h6>Sizing/Rounding</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Rounding: options</li>
						<li class="list-group-item">Sizing: contain</li>
						<li class="list-group-item">Sizing: cover</li>
						<li class="list-group-item">Sizing: crop</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 4</h5>
					<h6>Image Rotation</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Rotate: 45</li>
						<li class="list-group-item">Rotate: 180</li>
						<li class="list-group-item">Rotate: 315</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 5</h5>
					<h6>Image Shadows</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Type: Outer</li>
						<li class="list-group-item">Type: None</li>
						<li class="list-group-item">Type: Inner</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="card-footer text-center">
			<button id="btnGenFunc_Image" type="button" class="btn btn-success px-5">Run Demo</button>
		</div>
	</div>
	<div class="card">
		<div class="card-header">
			<div class="row align-items-center">
				<div class="col">
					<div class="h4 mb-0"><i class="bi bi-box-seam me-2"></i>Media</div>
				</div>
				<div class="col-auto">
					<a href="https://gitbrent.github.io/PptxGenJS/docs/api-media/" title="Documentation" target="_blank">
						Documentation<i class="bi bi-box-arrow-up-right ms-2"></i>
					</a>
				</div>
			</div>
		</div>
		<div class="card-body">
			<div class="row row-cols g-4">
				<div class="col">
					<h5>Slide 1</h5>
					<h6>Video Types</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Type: avi</li>
						<li class="list-group-item">Type: m4v</li>
						<li class="list-group-item">Type: mov</li>
						<li class="list-group-item">Type: mp4</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 2</h5>
					<h6>Audio Types</h6>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Type: mp3</li>
						<li class="list-group-item">Type: aif</li>
						<li class="list-group-item">Type: wav</li>
					</ul>
				</div>
				<div class="col">
					<h5>Slide 3</h5>
					<h6>YouTube Videos</h6>
					<div class="card border-warning">
						<div class="card-body">
							<p class="card-text text-warning fw-bold">Notes</p>
							<ul>
								<li>Only supported in PowerPoint Online &amp; desktop v16 and up.</li>
								<li>PowerPoint shows a warning banner when YouTube videos are present.</li>
							</ul>
							<div class="border p-2 rounded bg-warning-subtle">
								<div class="form-check mb-0">
									<input id="chkYoutube" class="form-check-input" type="checkbox" value="">
									<label for="chkYoutube" class="form-check-label">
										Include media demo slide 3
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card-footer text-center">
			<button id="btnGenFunc_Media" type="button" class="btn btn-success px-5">Run Demo</button>
		</div>
	</div>
</div>
